import React, { Component,createRef } from 'react';
import Model from "@/model/common"
import  './video.css'
import { Pagination, Modal, Button, message,Table, Space } from 'antd';
class Video extends Component {
    state = {
        data:[],
        isModalVisible:false,
        isModalVisible2:false,
        data2:[],
        videos:'',
        imgs:''
    }
    columns = [
            {
                title: 'Id',
                dataIndex: 'id',
                key: 'id',
                width: "50px"
            },
            {
                title: '标题',
                dataIndex: 'title',
                key: 'title',
                ellipsis:true,
                width:"350px"
            },
            {
                title: '描述',
                dataIndex: 'description',
                key: 'description',
                ellipsis:true,
                width:"500px"
            },
            {
                title: '图片',
                key: 'feed',
                dataIndex: 'feed',
                render: (text, record) => 
                (
                    <Space size="middle">
                        <span onClick={() => this.showModal2(record.feed)} style={{ color: '#1890FF', paddingRight: "10px", cursor: 'pointer' }}>
                            查看图片
                        </span>
                    </Space>
                ),
            },
            {
                title: '类型',
                dataIndex: 'category',
                key: 'category',
                // render:(status)=>{
                //    return status === 1 ?'正常':'禁用'
                // }
            },
            {
                title: '视频',
                key: 'playUrl',
                render: (text, record) => 
                (
                    <Space size="middle">
                        <span onClick={() => this.showModal(record.playUrl)} style={{ color: '#1890FF', paddingRight: "10px", cursor: 'pointer' }}>
                            查看视频
                        </span>
                    </Space>
                ),
            },
        ];
    render() {
        let {data2} =this.state
        return (
            <div>
                <Table
                    columns={this.columns}
                    className='videoclass'
                    dataSource={data2}
                    pagination={false}
                    rowKey={(row) => row.id }
                    onRow ={ ()=>{}

                    }
                />
                 <Modal title="观看视频" width="800"visible={this.state.isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel}>
                        <video src={this.state.videos}id="Videos" width="800" heigh="500" style={{marginLeft:"300px"}} controls autoPlay muted={true}></video>
                </Modal>
                <Modal title="观看图片" visible={this.state.isModalVisible2} onOk={this.handleOk2} onCancel={this.handleCancel2}>
                        <img src={this.state.imgs} width="450" height="400" alt="" />
                </Modal>
            </div>
            
        );
    }
    componentDidMount(){
        Model.getjoker().then(ret=>{
            console.log(ret);
            if(ret.code===200)
            {
                // message.success(ret.message)
                let info = []
                let info2 =[]
                ret.result.forEach(el=>{
                        info.push(el.data.content.data)
                        info2.push(el.data.content.data.cover.feed)
                })
                info.forEach(el=>{
                    info2.forEach(el2=>{
                        el['feed']= el2
                    })
                    
                })
                this.setState(()=>{
                        return {
                            data2:info
                        }
                    },()=>{
                        console.log(this.state.data2);
                    })
            }
        })
    }
     showModal = (data) => {
        this.setState(()=>{
            return {
                isModalVisible:true
            }
        })
        this.setState(()=>{
            return {
                videos:data
            }
        })
      };
      ispausevideo(flag){
        let video = document.getElementById("Videos")
        if(!flag){
            video.pause()
            video.currentTime =0
        }
      }
       handleOk = () => {
        this.setState(()=>{
            return {
                isModalVisible:false
            }
        },()=>{
            this.ispausevideo(this.state.isModalVisible)
        })
        
      };
    
      handleCancel = () => {
        this.setState(()=>{
            return {
                isModalVisible:false
            }
        },()=>{
            this.ispausevideo(this.state.isModalVisible)
        })
      };
      showModal2 = (data) => {
          console.log(data);
        this.setState(()=>{
            return {
                isModalVisible2:true
            }
        })
        this.setState(()=>{
            return {
                imgs:data
            }
        })
      };
    
       handleOk2 = () => {
        this.setState(()=>{
            return {
                isModalVisible2:false
            }
        })
      };
    
      handleCancel2 = () => {
        this.setState(()=>{
            return {
                isModalVisible2:false
            }
        })
      };
}

export default Video;
